import React from 'react';
import Search from 'components/public/search';
import { Button, Popconfirm, message, Table } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import { EditableContext, EditableFormRow, EditableCell } from 'components/public/editable';
import { unixTimeStemp } from 'utils/utils';

const { Consumer } = EditableContext;

class Convenience extends React.PureComponent {
	constructor() {
		super();
		this.state = {
			id: null,
		};
	}
	componentDidMount() {
		this.getList();
	}
	getList = () => {
		const { dispatch } = this.props;
		dispatch({ type: 'data/getListPark' });
	};
	delete = ids => {
		console.log(ids);
	};
	edit = ({ id }) => {
		this.setState({
			id,
		});
	};
	onConfirm = () => {
		this.setState({
			id: null,
		});
	};
	save = (form, id) => {
		const _this = this;
		const { dispatch } = _this.props;
		form.validateFields((error, row) => {
			if (error) {
				return;
			}
			dispatch({
				type: 'data/updatePark',
				payload: {
					...row,
					id,
				},
				callback: () => {
					message.success('更新成功!');
					_this.getList();
					_this.onConfirm();
				},
			});
		});
	};
	render() {
		const {
			list: { pageData, pageSize, pageNum, total },
		} = this.props;
		const { id } = this.state;
		const columns = [
			{
				dataIndex: 'traffic',
				title: '交通状况',
				width: 200,
				editable: true,
			},
			{
				dataIndex: 'alreadyUsedNum',
				title: '已使用停车位',
				aligh: 'center',
				width: 200,
				editable: true,
			},
			{
				dataIndex: 'surplusNum',
				title: '未使用停车位',
				aligh: 'center',
				width: 200,
				editable: true,
				// render: text => unixTimeStemp(text),
			},
			{
				dataIndex: 'handle',
				title: '操作',
				aligh: 'center',
				width: 100,
				render: (text, record) => (
					<>
						{id === record.id ? (
							<Consumer>
								{form => (
									<>
										<Button
											style={{ marginRight: 10 }}
											type="primary"
											onClick={() => this.save(form, record.id)}
										>
											保存
										</Button>
										<Popconfirm
											title="是否取消保存?"
											cancelText="不是"
											okText="是的"
											onConfirm={this.onConfirm}
										>
											<Button>取消</Button>
										</Popconfirm>
									</>
								)}
							</Consumer>
						) : (
							<>
								<Button
									type="primary"
									style={{ marginRight: 10 }}
									onClick={() => this.edit(record)}
								>
									编辑
								</Button>
								{/* <Popconfirm
									title="确认删除?"
									cancelText="取消"
									okText="删除"
									onConfirm={() => this.delete([record.id])}
								>
									<Button type="danger">删除</Button>
								</Popconfirm> */}
							</>
						)}
					</>
				),
			},
		];
		const propsColumns = columns.map(col => {
			if (!col.editable) {
				return col;
			}
			return {
				...col,
				onCell: record => ({
					record,
					dataindex: col.dataIndex,
					title: col.title,
					editing: id === record.id ? 'true' : 'false',
				}),
			};
		});
		return (
			<Table
				columns={propsColumns}
				dataSource={pageData}
				components={{ body: { row: EditableFormRow, cell: EditableCell } }}
				rowKey="traffic"
			/>
		);
	}
}
export default connect(state => ({
	list: state.data.parkList,
}))(Convenience);
